<template>
  <div class="rounds-info">
    <div v-for="(cubeType, index) in cubeTypes" :key="index" class="cube-type">
      <h3 class="cube-title">{{ cubeType }}</h3>
      <div v-for="(round, roundIndex) in roundTypes" :key="roundIndex" class="round-item">
        <span class="round-title">{{ round }}：</span>
        <span class="round-status">{{ getRoundStatus(roundIndex) }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  totalRounds: {
    type: Number,
    default: 3
  },
  completedRounds: {
    type: Number,
    default: 0
  },
  cubeTypes: {
    type: Array,
    default: () => ['二阶魔方', '三阶魔方', '金字塔魔方', '斜转魔方']
  },
  roundTypes: {
    type: Array,
    default: () => ['第一轮', '第二轮', '第三轮']
  }
});

const getRoundStatus = (roundIndex) => {
  const currentRound = roundIndex + 1;
  if (props.completedRounds >= currentRound) {
    return '已完成';
  } else if (props.completedRounds + 1 === currentRound) {
    return '进行中';
  } else {
    return '待开始';
  }
};
</script>

<style scoped>
.rounds-info {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-bottom: 30px;
}

.cube-type {
  background: #f5f7fa;
  border-radius: 8px;
  padding: 12px;
}

.cube-title {
  font-size: 18px;
  color: #303133;
  margin: 0 0 15px 0;
  text-align: center;
}

.round-item {
  margin: 10px 0;
  font-size: 16px;
}

.round-title {
  font-weight: bold;
  margin-right: 10px;
}

.round-status {
  color: #67C23A;
}
</style>